<template>
  <a-modal :open="open" width="1100px" title="协定方" centered destroy-on-close @ok="onOk" @cancel="onCancel">
    <div class="flex justify-between">
      <a-input v-model:value="searchkey" class="w-60" placeholder="套餐名称/助记码" allow-clear />
      <a-space>
        <a-button type="default" @click="onReset">重置</a-button>
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </a-space>
    </div>
    <div class="flex justify-between h-[440px] mt-2">
      <div class="w-60 bg-thin h-full flex flex-col items-center">
        <a-tabs v-model:active-key="suitType" centered>
          <a-tab-pane :key="1" tab="科室" />
          <a-tab-pane :key="0" tab="个人" />
          <a-tab-pane :key="2" tab="全院" />
          <a-tab-pane key="" tab="全部" />
        </a-tabs>
        <SuitList ref="suitListRef" preview :suit-type="suitType" :search-key="searchkey" :template-type="2" @select="onSelectSuit" />
      </div>
      <div class="flex-1 ml-4 w-[800px]">
        <TCMPreview ref="tcmRef" :tcid="selectedSuit?.tcid" />
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import SuitList from '@/views/out-doctor/components/SuitList'
import TCMPreview from './TCMPreview'

const emit = defineEmits(['update:open', 'ok'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
})
const searchkey = ref('')
const tcmRef = ref()
const suitListRef = ref()
const suitType = ref(1)
const selectedSuit = ref(null)
const onCancel = () => {
  searchkey.value = ''
  suitType.value = 1
  emit('update:open', false)
  selectedSuit.value = {}
}
watch(
  () => props.open,
  (val) => !val && onCancel()
)
const onSelectSuit = (select) => {
  selectedSuit.value = select
}

const onSearch = () => {
  suitListRef.value.getData()
}

const onReset = () => {
  suitType.value = 1
  searchkey.value = ''
  suitListRef.value.getData()
}
const onOk = async () => {
  const tcmData = tcmRef.value.tcmData
  if (tcmData.length === 0) {
    return message.error('此协定方没有药品')
  }
  emit('ok', tcmData)
  onCancel()
}
</script>
